<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<%@ taglib prefix="form" uri="http://www.springside.org.cn/tags/form" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<script type="text/javascript" src="${ctx}/static/jquery/jquery-extensions/jquery.ztree.all-3.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/static/jquery/jquery-extensions/css/zTreeStyle/demo.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/static/jquery/jquery-extensions/css/zTreeStyle/zTreeStyle.css"/>

<script type="text/javascript">
    var roleBuckets = {};
    var dataTable = null;
    var id_Array = new Array();

    function openDialog4Role(id){
        $( "#dialog-form" ).dialog( "open" );
        if(id!=""){
            var role = roleBuckets[id];
            $( "#m_id" ).val(id);
            $( "#roleName" ).val(role.roleName);
            $( "#roleDesc" ).val(role.roleDesc);
            $("#orgCode").val(role.orgCode);
            parsePermissionIds(role.permissionIds);
            initModifyPermission();
        }else{
            $( "#m_id" ).val("");
            $( "#roleName" ).val("");
            $( "#roleDesc" ).val("");
            clearCheckedNodes();
        }
    }

    function clearCheckedNodes(){
        var zTree = $.fn.zTree.getZTreeObj("tree");
        var nodes = zTree.getCheckedNodes(true);
        for (var j=0; j<nodes.length; j++) {
            zTree.checkNode(nodes[j],false,false,false);
        }
    }

    function parsePermissionIds(ids){
        id_Array = ids.split(",");
    }

    function initModifyPermission(){
        var zTree = $.fn.zTree.getZTreeObj("tree");

        clearCheckedNodes();

        for(var i=0;i<id_Array.length;i++){
            var node = zTree.getNodeByParam("id",id_Array[i],null);
            zTree.checkNode(node,true,false,true);
        }
    }

    Array.prototype.contains = function(obj) {
        var i = this.length;
        while (i--) {
            if (this[i] == obj) {
                return true;
            }
        }
        return false;
    }

    function deleteRole(id){
    	deleteConfirm(function(){
    		$.ajax({
                url:"${ctx}/system/deleteRole",
                data: {"m_id":id},
                success:function(data){
                    $("#searchForm").submit();
                }
            });
 	   });
    }

    var m_id = $( "#m_id" );

    var setting = {
        data: {
            key: {
                title: "t"
            }
        },
        view: {
            selectedMulti: false
        },
        check: {
            enable: true
        }
    };


    var permissionsTree = ${permissionsTree};

    $(function () {
        $("#tabs").tabs();

        $("#s_orgCode").find("option[value=${map.orgCode}]").attr("selected",true);

        $.fn.zTree.init($("#tree"), setting,permissionsTree);

        dataTableSettings.bServerSide = true ;
        dataTableSettings.sAjaxSource = "${ctx}/system/getPosts" ;
        dataTableSettings.fnServerData = function(sSource, aoData, fnCallback){
            util.postData4DT(sSource, aoData, fnCallback);
        };
        dataTableSettings.aoColumns = [
            { "mData": "roleName","sClass": "center", "sTitle": "Post Name" },
            { "mData": "roleDesc","sClass": "center", "sTitle": "Description" },
            { "mData": "roleOrg","sClass": "center", "sTitle": "Organization" },
            { "mData": "permissionsString","sClass": "center", "sTitle": "Description" },
            { "mData":"id",
                "sClass": "center",
                "sTitle": "Operations",
                "bSearchable": false,
                "bStorable": false,
                "bSortable": false,
                "fnRender": function (obj) {
                    roleBuckets[obj.aData.id] = obj.aData;
                    return '<a flag=\"'+obj.aData.id+'\" href=\"javascript:void(0)\" onclick=\"openDialog4Role('+obj.aData.id+')\">Edit</a> '
                            + ' <a href=\"javascript:void(0)\" onclick=\"deleteRole('+obj.aData.id+')\">Delete</a>';
                }
            }
        ];

        dataTable = $('#roleListTable').dataTable(dataTableSettings);

        var m_roleName = $( "#roleName" );
        var m_orgCode = $( "#orgCode" );

        $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 500,
            width: 650,
            modal: true,
            buttons: {
                "Save": function() {

                    var bValid = true;
                    m_roleName.removeClass( "ui-state-error" );
                    m_orgCode.removeClass( "ui-state-error" );

                    bValid = bValid && checkRequired( m_roleName, "Post Name");
                    bValid = bValid && checkRequired( m_orgCode, "Organization");

                    var treeObj = $.fn.zTree.getZTreeObj("tree");
                    var nodes = treeObj.getCheckedNodes(true);
                    var v = "";
                    for (var i=0; i<nodes.length; i++) {
                        if(i!=0){
                            v += ",";
                        }
                        v += ""+nodes[i].id;
                    }
                    $("#permissionIds").val(v);
                     var orgCodeValue = $("#orgCode").val();
                    $("#roleOrgCode").val(orgCodeValue);
                    if ( bValid ) {
                        $.post("${ctx}/system/saveRole"
                                ,$('#roleForm').serialize()
                                ,function(a){
                                    if(a){
                                        var c = eval("("+a+")");
                                        if(roleBuckets[c.id]){
                                            roleBuckets[c.id] = c;
                                        }
                                        $("#searchForm").submit();
                                    }
                                    $( "#dialog-form" ).dialog( "close" );
                                });
                    }
                },
                "Cancel": function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                m_roleName.val( "" ).removeClass( "ui-state-error" );
                m_orgCode.val( "" ).removeClass( "ui-state-error" );
            }
        });
    });


</script>

<div id="dialog-form" title="Post Manager" style="display: none;">
    <p class="validateTips"></p>

    <form:form id="roleForm" modelAttribute="sysRoleVO" action="${ctx}/system/saveRole" method="post" class="form-horizontal">
        <input type="hidden" name="id" id="m_id" value="${sysRoleVO.id}"/>
        <input type="hidden" name="permissionIds" id="permissionIds" value="${sysRoleVO.permissionIds}"/>
        <input type="hidden" name="roleOrgCode" id="roleOrgCode" value="${sysRoleVO.orgCode}"/>
        <table class="searchtable">
            <tbody>
            <tr>
                <td class="bg_gray">Post Name</td>
                <td>
                    <input type="text" id="roleName" name="roleName" maxlength="10"
                           value="${sysRoleVO.roleName}" class="text_medium"/>
                </td>
            </tr>

            <tr>
                <td class="bg_gray">Description</td>
                <td>
                    <input type="text" name="roleDesc" id="roleDesc" value="${sysRoleVO.roleDesc}"
                           maxlength="25" class="text_medium"/>
                </td>
            </tr>

            <tr>
                <td class="bg_gray">Organization</td>
                <td>
                    <tags:select tableName="T_SYSTEM_ORGANIZATION" name="orgCode" id="orgCode"/>
                </td>
            </tr>

            <tr>
                <td class="bg_gray">Permission Setting</td>
                <td>
                    <div class="zTreeDemoBackground left">
                        <ul id="tree" class="ztree"></ul>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </form:form>
</div>


<div id="tabs">

    <ul>
        <li id="t1"><a href="#tabs-1">Post Manager</a>
        </li>
    </ul>

    <div id="tabs-1">

        <div class="content-box-content">
            <div id="tab2">
                <form action="" method="POST" id="searchForm">
                    <input type="hidden" name="s_totalCount" value="${map.totalCount}"/>
                    <table class="searchtable">
                        <tbody>
                        <tr>
                            <td class="bg_gray">Post Name</td>
                            <td>
                                <input type="text" name="s_roleName" id="s_roleName" maxlength="100" value="${map.roleName}" class="text_medium"/>
                            </td>
                        </tr>

                        </tbody>
                    </table>

                    <p><input type="submit" value="Search" > &nbsp;<input type="reset" value="Reset">&nbsp;<input type="button" value="Add" onclick="openDialog4Role('')">&nbsp;</p>
                </form>
            </div>

            <div class="bg"></div>

            <div id="main-content" class="tablewrapper">
                <table cellpadding="0" cellspacing="0" border="0" class="display" id="roleListTable">

                </table>
            </div>
            <div class="clr"></div>
        </div>
        <div class="clr"></div>
    </div>
</div>